<template>
  <div class="register-wrapper">
    <div class="pulic-login-title">
      <img class="logo" src="@/assets/home/color-head.png" alt="" />
      <span class="tip">欢迎注册</span>
    </div>
    <div class="register-con">
      <div class="tab-box">
        <el-tabs v-model="activeName" :stretch="true">
          <el-tab-pane label="普通用户" name="ordinaryForm">
            <p class="tip">
              个人通过手机号可快速注册为普通用户,普通用户可在平台浏览信息,但不可发布服务,委托服务。
            </p>
            <div class="ordinary">
              <el-form :model="ordinaryForm" :rules="ordinaryRule" ref="ordinaryForm" label-width="120px" size="small">
                <el-form-item label="用户名" prop="userName">
                  <el-input v-model="ordinaryForm.userName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="ordinaryForm.phone" placeholder="请输入手机号码">
                    <el-button slot="append" :disabled='codeDis' @click="getCode('ordinaryForm')">{{ senCodeMsg }}</el-button>
                  </el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <el-input v-model="ordinaryForm.code" placeholder="请输入验证码"></el-input>
                </el-form-item>
                <el-form-item label="设置密码" prop="pass">
                  <el-input v-model="ordinaryForm.pass" placeholder="请输入密码(6-14位字母和数字组合)" autocomplete="new-password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password">
                  <el-input v-model="ordinaryForm.password" placeholder="请确认密码" autocomplete="new-password" show-password></el-input>
                </el-form-item>
                <el-form-item label="业务推荐人" prop="referee">
                  <el-input v-model="ordinaryForm.referee" placeholder="请输入业务推荐人"></el-input>
                </el-form-item>
                <el-form-item prop="remeber">
                  <el-checkbox v-model="ordinaryForm.remeber"></el-checkbox>
                  <span class="checkbox-tips">我已阅读并同意遵守《食谷产业互联网用户服务协议》</span>
                </el-form-item>
              </el-form>
              <p class="success" @click="submitRegister('ordinaryForm')">提交</p>
              <div class="last">
                已有账号，
                <router-link to="/login">
                  <span class="green">立即登录</span>
                </router-link>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="企业交易商" name="enterpriseForm">
            <p class="tip">
              企业自主注册或普通用户认证,通过后台审核后,成为企业交易商,可开展服务发布,委托采购等业务。
            </p>
            <el-form :model="enterpriseForm" :rules="enterpriseRule" ref="enterpriseForm" label-width="140px" size="small">
              <div class="enterprise">
                <div class="basic">
                  <div class="public-title">
                    <span class="border">企业基础信息</span>
                  </div>
                  <el-form-item label="企业名称" prop="enterpriseName">
                    <el-input v-model="enterpriseForm.enterpriseName" placeholder="请输入企业名称"></el-input>
                  </el-form-item>
                  <el-form-item label="企业类型" prop="enterpriseType">
                    <el-input v-model="enterpriseForm.enterpriseType" placeholder="请输入企业类型"></el-input>
                  </el-form-item>
                  <el-form-item label="通讯地址" required>
                    <div class="province-city-section">
                      <el-form-item prop="province">
                        <el-select v-model="enterpriseForm.province" filterable clearable>
                          <el-option v-for="item in regionOption" :key="item.label" :label="item.label" :value="item.label">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item prop="city">
                        <el-select v-model="enterpriseForm.city" filterable clearable>
                          <el-option v-for="item in locationOption" :key="item.label" :label="item.label" :value="item.label">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-form-item>
                  <el-form-item label="详细地址" prop="address">
                    <el-input v-model="enterpriseForm.address" placeholder="请输入详细地址"></el-input>
                  </el-form-item>
                  <el-form-item label="统一社会信用代码" prop="creditCode">
                    <el-input v-model="enterpriseForm.creditCode" placeholder="请输入统一社会信用代码"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱地址" prop="email">
                    <el-input v-model="enterpriseForm.email" placeholder="请输入邮箱地址"></el-input>
                  </el-form-item>
                  <div class="public-title">
                    <span class="border">法定代表人信息</span>
                  </div>
                  <el-form-item label="法定代表人" prop="legalRepresentative">
                    <el-input v-model="enterpriseForm.legalRepresentative" placeholder="请输入法定代表人"></el-input>
                  </el-form-item>
                  <el-form-item label="法定代表人身份证号" prop="legalIdCard">
                    <el-input v-model="enterpriseForm.legalIdCard" placeholder="请输入法定代表人身份证号"></el-input>
                  </el-form-item>
                </div>
                <div class="account">
                  <div class="public-title">
                    <span class="border">账号信息</span>
                  </div>
                  <el-form-item label="用户名" prop="userName">
                    <el-input v-model="enterpriseForm.userName" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="enterpriseForm.phone" placeholder="请输入手机号码">
                      <el-button slot="append" :disabled='codeDis' @click="getCode('enterpriseForm')">{{ senCodeMsg }}</el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="验证码" prop="code">
                    <el-input v-model="enterpriseForm.code" placeholder="请输入验证码"></el-input>
                  </el-form-item>
                  <el-form-item label="业务推荐人" prop="referee">
                    <el-input v-model="enterpriseForm.referee" placeholder="请输入业务推荐人"></el-input>
                  </el-form-item>
                  <div class="public-title">
                    <span class="border">授权管理人信息</span>
                  </div>
                  <el-form-item label="姓名" prop="authorizer">
                    <el-input v-model="enterpriseForm.authorizer" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="enterpriseForm.idCard" placeholder="请输入身份证号"></el-input>
                  </el-form-item>
                  <el-form-item label="设置密码" prop="pass">
                    <el-input v-model="enterpriseForm.pass" placeholder="请输入密码(6-14位字母和数字组合)" autocomplete="new-password" show-password></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="password">
                    <el-input v-model="enterpriseForm.password" placeholder="请确认密码" autocomplete="new-password" show-password></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <div class="remeber-enterprise">
              <el-checkbox v-model="enterpriseForm.remeber"></el-checkbox>
              <span class="checkbox-tips">我已阅读并同意遵守《食谷产业互联网用户服务协议》</span>
            </div>
            <p class="success" @click="submitRegister('enterpriseForm')">提交</p>
            <div class="last">
              已有账号，
              <router-link to="/login">
                <span class="green">立即登录</span>
              </router-link>
            </div>
          </el-tab-pane>
          <el-tab-pane label="个人交易商" name="personalForm">
            <p class="tip">
              企业自主注册或普通用户认证,通过后台审核后,成为企业交易商,可开展服务发布,委托采购等业务。
            </p>
            <el-form :model="personalForm" :rules="personalRule" ref="personalForm" label-width="100px" size="small">
              <div class="enterprise">
                <div class="basic">
                  <div class="public-title">
                    <span class="border">企业基础信息</span>
                  </div>
                  <div class="identity-card">
                    <div v-for="item in uploads" :key="item.prop" class="identity-card-item">
                      <el-upload action="#"
                                drag
                                accept=".jpg, .jpeg, .png"
                                :auto-upload="false"
                                :show-file-list="false"
                                :on-change="(e)=> handleUpload(e, item.prop)">
                        <img v-if="item.value" :src="item.value" class="data-url">
                        <i v-else class="iconfont" v-html="item.icon"></i>
                      </el-upload>
                      <span class="upload-tip">{{ item.title }}</span>
                    </div>
                  </div>
                  <div class="identity-card-tips">请选择证件四边四角可见，证件照清晰，只支持jpg、jpeg、png格式</div>
                  <el-form-item label="姓名" prop="authorizer">
                    <el-input v-model="personalForm.authorizer" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="personalForm.idCard" placeholder="请输入身份证号"></el-input>
                  </el-form-item>
                  <el-form-item label="业务推荐人" prop="referee">
                    <el-input v-model="personalForm.referee" placeholder="请输入业务推荐人"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱地址" prop="email">
                    <el-input v-model="personalForm.email" placeholder="请输入邮箱地址"></el-input>
                  </el-form-item>
                </div>
                <div class="account">
                  <div class="public-title">
                    <span class="border">账号信息</span>
                  </div>
                  <el-form-item label="用户名" prop="userName">
                    <el-input v-model="personalForm.userName" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="personalForm.phone" placeholder="请输入手机号码">
                      <el-button slot="append" :disabled='codeDis' @click="getCode('personalForm')">{{ senCodeMsg }}</el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="验证码" prop="code">
                    <el-input v-model="personalForm.code" placeholder="请输入验证码"></el-input>
                  </el-form-item>
                  <el-form-item label="通讯地址">
                    <div class="province-city-section">
                      <el-form-item prop="province">
                        <el-select v-model="personalForm.province" filterable clearable>
                          <el-option v-for="item in regionOption" :key="item.label" :label="item.label" :value="item.label">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item prop="city">
                        <el-select v-model="personalForm.city" filterable clearable>
                          <el-option v-for="item in locationOption" :key="item.label" :label="item.label" :value="item.label">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </el-form-item>
                  <el-form-item label="详细地址" prop="address">
                    <el-input v-model="personalForm.address" placeholder="请输入详细地址"></el-input>
                  </el-form-item>
                  <el-form-item label="设置密码" prop="pass">
                    <el-input v-model="personalForm.pass" placeholder="请输入密码(6-14位字母和数字组合)" autocomplete="new-password" show-password></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="password">
                    <el-input v-model="personalForm.password" placeholder="请确认密码" autocomplete="new-password" show-password></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <div class="remeber-enterprise">
              <el-checkbox v-model="personalForm.remeber"></el-checkbox>
              <span class="checkbox-tips">我已阅读并同意遵守《食谷产业互联网用户服务协议》</span>
            </div>
            <p class="success" @click="personalSubmit('personalForm')">提交</p>
            <div class="last">
              已有账号，
              <router-link to="/login">
                <span class="green">立即登录</span>
              </router-link>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { register, checkCode } from "@/api/login";
import { uploadFile } from "@/api/upload";
import { validatePhone, validatePassword, validateEmail, validateIdCard, validateCreditCode } from "@/utils/validate";
import areaData from "@/mixins/areaData"

export default {
  name: "Register",
  mixins: [areaData],
  data () {
    const registeredresPass = (rule, value, callback) => {
      if (value && value !== this[this.activeName].pass) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback()
      }
    };
    const basicRule = {
      userName: [
        { required: true, message: "请输入用户名", trigger: "blur" },
      ],
      phone: [
        { required: true, message: "请输入手机号码", trigger: "blur" },
        { validator: validatePhone, trigger: "blur" }
      ],
      code: [
        { required: true, message: "请输入正确的验证码", trigger: "blur" },
      ],
      pass: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { validator: validatePassword, trigger: "blur" }
      ],
      password: [
        { required: true, message: "请确认密码", trigger: "blur" },
        { validator: registeredresPass, trigger: "blur" }
      ],
    }
    const addressRule = {
      province: [
        { required: true, message: "请选择省", trigger: "blur" },
      ],
      city: [
        { required: true, message: "请选择市", trigger: "blur" },
      ],
      address: [
        { required: true, message: "请输入详细地址", trigger: "blur" }
      ]
    }
    const emailRule = {
      email: [
        { required: true, message: "请输入邮箱", trigger: "blur" },
        { validator: validateEmail, trigger: "blur" }
      ]
    }
    return {
      textTitle: "欢迎注册", //找回密码
      activeName: "ordinaryForm",
      countdown: 60, //60s倒计时
      timer: "", //定时器
      senCodeMsg: "发送验证码",
      codeDis: false,
      ordinaryForm: {
        userName: "",
        phone: "",
        code: "",
        pass: "",
        password: "",
        referee: "",
        remeber: true
      },
      ordinaryRule: {
        ...basicRule
      },
      enterpriseForm: {
        enterpriseName: "",
        enterpriseType: "",
        province: "",
        city: "",
        address: "",
        creditCode: "",
        email: "",
        legalRepresentative: "",
        legalIdCard: "",
        userName: "",
        phone: "",
        code: "",
        referee: "",
        authorizer: "",
        idCard: "",
        pass: "",
        password: "",
        remeber: true
      },
      enterpriseRule: {
        enterpriseName: [
          { required: true, message: "请输入企业名称", trigger: "blur" }
        ],
        enterpriseType: [
          { required: true, message: "请输入企业类型", trigger: "blur" }
        ],
        creditCode: [
          { required: true, message: "请输入统一社会信用代码", trigger: "blur" },
          { validator: validateCreditCode, trigger: "blur" }
        ],
        legalRepresentative: [
          { required: true, message: "请输入法定代表人", trigger: "blur" }
        ],
        legalIdCard: [
          { required: true, message: "请输入法定代表人身份证号", trigger: "blur" },
          { validator: validateIdCard, trigger: "blur" }
        ],
        ...basicRule,
        ...addressRule,
        ...emailRule
      },
      uploads: [
        {
          icon: '&#xe68d;',
          title: '身份证正面',
          prop: 'frontPic',
          value: ''
        },
        {
          icon: '&#xe68e;',
          title: '身份证反面',
          prop: 'backPic',
          value: ''
        },
        {
          icon: '&#xe690;',
          title: '手持身份证',
          prop: 'holdPic',
          value: ''
        }
      ],
      personalForm: {
        authorizer: "",
        idCard: "",
        referee: "",
        email: "",
        userName: "",
        phone: "",
        code: "",
        province: "",
        city: "",
        address: "",
        pass: "",
        password: "",
        remeber: true
      },
      personalRule: {
        authorizer: [
          { required: true, message: "请输入姓名", trigger: "blur" }
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: validateIdCard, trigger: "blur" }
        ],
        ...basicRule,
        ...addressRule,
        ...emailRule
      },
      regionOption: this.getProvince()
    };
  },
  computed: {
    locationOption() {
      if (!this[this.activeName].province) return []
      this[this.activeName].city = ''
      return this.getRegion(this[this.activeName].province, true);
    }
  },
  methods: {
    // 点击发送验证码
    async getCode (formName) {
      if (!this[formName].phone) {
        this.message.error("请先输入正确格式的授权人手机号");
        this.$refs[formName].validateField("phone");
      } else {
        checkCode({ phone: this[formName].phone }).then((res) => {
          this.codeDis = true
          let num = this.countdown;
          this.timer = setInterval(() => {
            this.senCodeMsg = `${num--}s后重新获取`;
            if (num < 0) {
              this.senCodeMsg = `重新获取`;
              this.codeDis = false
              clearInterval(this.timer);
            }
          }, 1000);
        });
      }
    },
    // 上传图片
    handleUpload ({ raw }, prop) {
      const formData = new FormData()
      formData.append('file', raw)
      uploadFile(formData).then((res) => {
        this.message.success("上传成功");
        const index = this.uploads.findIndex(item => item.prop === prop)
        this.$set(this.uploads[index], 'value', "http://" + res.data.url)
      }).catch((error) => {
        this.message.error('上传失败');
      })
    },
    // 注册提交
    submitRegister (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this[formName].remeber) {
            this.message.warning("请阅读并同意遵守《食谷产业互联网用户服务协议》");
            return
          }
          register(this[formName]).then((res) => {
            this.message.success("注册成功去登陆");
            this.$router.push({
              path: "/login",
            });
          });
        } else {
          return false;
        }
      });
    },
    // 个人交易商注册提交
    personalSubmit (formName) {
      const fitem = this.uploads.find(item => !item.value)
      if (fitem) {
        this.message.error('请上传' + fitem.title)
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this[formName].remeber) {
            this.message.warning("请阅读并同意遵守《食谷产业互联网用户服务协议》");
            return
          }
          const params = this.uploads.reduce((prev, next) => {
            prev[next.prop] = next.value
            return prev
          }, this[formName])
          register(params).then((res) => {
            this.message.success("注册成功去登陆");
            this.$router.push({
              path: "/login",
            });
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/style/color.scss";
.el-checkbox {
  margin-right: 4px;
}
::v-deep .el-checkbox__inner:hover {
  border-color: $greenColor;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: $greenColor;
  border-color: $greenColor;
}
::v-deep .el-tabs__nav-wrap::after {
  display: none;
}
.register-wrapper {
  background: #FFF;
  .success {
    width: 160px;
    height: 40px;
    background: $greenColor;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    margin: 22px auto 10px;
  }
  ::v-deep .el-tabs__header {
    padding: 0 20%;
    margin-bottom: 0;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: $greenColor;
  }
  ::v-deep .el-tabs__item:hover,
  ::v-deep .el-tabs__item.is-active {
    color: $greenColor;
  }
  ::v-deep .el-tabs__content {
    background-color: #fff;
    padding: 50px 0;
  }
  .register-con {
    background: #F5F5F5;
    .tab-box {
      width: $bigWidth;
      padding: 30px 0;
      margin: 0 auto;
    }
    .ordinary {
      width: 480px;
      margin: 0 auto;
      // text-align: center;
    }
    ::v-deep .el-input-group__append {
      background-color: $greenColor;
      color: #fff;
      border: 1px solid $greenColor;
    }
    .error-tip {
      text-align: left;
      padding-left: 100px;
      box-sizing: border-box;
      margin-bottom: 18px;
      font-size: 12px;
      color: red;
    }
    .tip {
      text-align: center;
      margin-top: 10px;
      margin-bottom: 30px;
    }
    .checkbox-tips {
      color: #999;
    }
    // 企业交易
    .enterprise {
      padding: 0 50px;
      display: flex;
      justify-content: space-between;
      .basic {
        width: 40%;
      }
      .account {
        width: 40%;
      }
    }
    .remeber-enterprise {
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .identity-card {
      display: flex;
      justify-content: space-between;
      margin-bottom: 18px;
    }
    .identity-card-item {
      width: 32%;
      height: 100px;
      text-align: center;
      color: #333;
      ::v-deep .el-upload,
      ::v-deep .el-upload .el-upload-dragger {
        width: 100%;
        height: 70px;
      }
      .iconfont {
        font-size: 40px;
        line-height: 70px;
        color: #999;
      }
      .data-url {
        width: 100%;
        height: 100%;
      }
      .upload-tip {
        line-height: 28px;
      }
    }
    .identity-card-tips {
      color: #999;
      margin-bottom: 18px;
    }
  }
}
.last {
  text-align: center;
  color: #999;
  .green {
    color: $greenColor;
    cursor: pointer;
  }
}
.province-city-section {
  display: flex;
  justify-content: space-between;
  .el-form-item {
    width: 48%;
    margin-bottom: 0;
  }
}
</style>
